<template>
    <div id="homePage">
        <el-row :gutter="15"  style = "height:120px;width:100%;background:#fff;margin-bottom: 10px;margin-left:0;margin-right:0;padding:15px;">
            <el-col :span="4"  v-for = "(item,index) in headList" :key = "index">
                <div :class = "{'colCon':true,'bgColor':index==1 || index==3 || index==5}" @click = "changePage(item)">
                  <el-popover
                    placement="bottom"
                    width="150" v-if="index == 4" trigger="hover" popper-class="qcPopover">
                      <ul class="popoverUl">
                        <li v-for="(item,index) in QcTypeNumList" :key="index">
                          <p><span></span><span >{{item.name}}</span><span class="qcNum">{{item.num}}</span></p>
                        </li>
                      </ul>
                       <div slot="reference">
                         <div style = "height:100%;display:inline-block;width:50%;text-align:center;">
                             <img :src="item.src" style="height:50%;margin-top:10px;">
                             <p style = "font-size:15px;">{{new Date().getFullYear()}}年</p>
                         </div>
                         <div style = "height:100%;display:inline-block;font-size: 20px;font-weight: 550;vertical-align:top;text-align:center;width:46%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                             <p style = "font-size:15px;margin-top:10px;margin-bottom:6px;">{{item.name}}</p>
                             <p :title = "item.data">{{item.data}}</p>
                         </div>
                       </div>
                    </el-popover>
                    <div v-else>
                      <div style = "height:100%;display:inline-block;width:50%;text-align:center;">
                          <img :src="item.src" style="height:50%;margin-top:10px;">
                          <p style = "font-size:15px;">{{new Date().getFullYear()}}年</p>
                      </div>
                      <div style = "height:100%;display:inline-block;font-size: 20px;font-weight: 550;vertical-align:top;text-align:center;width:46%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                          <p style = "font-size:15px;margin-top:10px;margin-bottom:6px;">{{item.name}}</p>
                          <p :title = "item.data">{{item.data}}</p>
                      </div>
                    </div>



                </div>
            </el-col>
        </el-row>

        <div style = "height:calc((100% - 140px)/2);width:100%;margin-bottom: 10px;">
            <div style="height:100%;background:#fff;width:58%;float:left;">
                <div class="zhanshikuang" style="position:relative;height:100%;">
                    <div class="zhanshikuangitem" style="width: 48%;vertical-align:top">
                        <div class = "chartTitle cusor" @click = "openpage('jiancejieguo')">本月检测及时率</div>
                        <!-- <div id="taskjindu" style = "height:calc(100% - 35px);"></div> -->
                        <div id="taskjindu2" style = "height:calc(100% - 35px);"></div>
                    </div>
                    <div class="zhanshikuangitem" style="width: 48%;">
                        <div class = "chartTitle cusor" @click = "openpage('newtaskmanage')">本月任务完成率 </div>
                        <div id="taskjindu1" style = "height:calc(100% - 35px);"></div>
                    </div>
                </div>
            </div>
            <div style = "width:calc(42% - 10px);height:100%; float:right;background:#fff;padding:10px;">
              <div v-for = "(item,index) in progressData"  :key = "index" style = "height:16%;">
                  <div>{{item.name}}</div>
                  <el-progress :percentage="item.percent" :color="customColor" :show-text = "false"></el-progress>
                  {{item.value}}
              </div>
            </div>
        </div>
        <div class="homeTaskTable">
            <div style = "width:58%;height:100%;float:left;background:#fff;padding:10px;">
                <div id="lineChart"></div>
            </div>
            <div style = "width:calc(42% - 10px);height:100%; float:right;background:#fff;">
                <div class = "chartTitle">设备运行状态</div>
                <div class="zhanshikuangitem" style="width:70%;height:calc(100% - 40px);margin:0 auto;display:inline-block;">
                    <div id="shebeibaoyanglv" ></div>
                    <!--<div id="shebeibaoyanglv1"></div>
                    <div id="shebeibaoyanglv2" ></div>-->
                </div>
                <div class = "chartDesc" style = "width:29%;height:calc(100% - 45px);display:inline-block;background:#fff;padding-top:15px;vertical-align:top;">

                    <div>
                        检测仪器总数:
                        <div class = "num"> {{equipInfo.total}}</div>台
                    </div>
                    <div @click = "openpage('yiqibaoyang')" class = "cusor">
                        维护保养异常:
                        <div class = "num">  {{equipInfo.maintainExe}}</div>台
                    </div>
                     <div  @click = "openpage('yiqijianding')" class = "cusor">
                        检定校准异常:
                        <div class = "num">  {{equipInfo.calibrationExe}}</div>台
                    </div>
                    <div @click = "openpage('qijianhecha')" class = "cusor">
                        期间核查异常:
                        <div class = "num">  {{equipInfo.checkExe}}</div>台
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
    import { mapState } from 'vuex'

    export default {

        data() {
            return {
                menuData:[],
                equipInfo:{},
                pageInfo:[
                    {page:"kucun",pageName:'库存',parentPage:"resourcesManage",},
                    {page:"jiancejieguo",pageName:'数据录入',parentPage:"testManage",},
                    {page:"newtaskmanage",pageName:'任务下达',parentPage:"testManage"},

                    {page:"sampleregistration",pageName:'样品登记',parentPage:"testManage",},
                    {page:"samplereception",pageName:'样品接收',parentPage:"testManage",},
                    {page:"yangpinlingqu",pageName:'样品领取',parentPage:"testManage"},
                    {page:"jiancejieguo",pageName:'数据录入',parentPage:"testManage",},
                     {page:"mygroupcheck",pageName:'数据校核',parentPage:"testManage",},
                    {page:"mygroupsanjishenhe",pageName:'数据审核',parentPage:"testManage"},

                    {page:"yiqibaoyang",pageName:'仪器保养',parentPage:"resourcesManage"},
                    {page:"yiqijianding",pageName:'检定校准',parentPage:"resourcesManage"},
                    {page:"qijianhecha",pageName:'期间核查',parentPage:"resourcesManage"},
                    {page:"basicinformationofinstrument",pageName:'仪器信息',parentPage:"resourcesManage"},
                ],
                percentage: 130,
                customColor: '#409eff',

                progressData:[
                    {value:0,name:"待登记样品",key:"sampleRegist"},
                    {value:0,name:"待接收样品",key:"sampleAccept"},
                    {value:0,name:"待领取样品",key:'sampleReceive'},
                    {value:0,name:"待录入批次",key:"batchEnter"},
                    {value:0,name:"待审核批次",key:"batchAudit"},
                    {value:0,name:"待校核批次",key:"batchCheck"},
                ],
                headList:[
                    {name:"任务总量",data:0,src:require('../assets/img/headIcon.png')},
                    {name:"样品总量",data:0,src:require('../assets/img/headIcon2.png')},
                    {name:"报告总量",data:0,src:require('../assets/img/headIcon3.png')},
                    {name:"维护数量",data:0,src:require('../assets/img/headIcon4.png')},
                     {name:"质控总量",data:0,src:require('../assets/img/headIcon5.png')},
                    {name:"物资预警",data:0,src:require('../assets/img/headIcon6.png'),page:'kucun'},
                ],
                QcTypeNumList:[],


            }
        },
        components: {

        },
        computed: {
            ...mapState(['pageName', 'menuName', 'taskStatus', 'reportWordList','nowpage']),


            taskListTableHeight: function () {
                return ((window.innerHeight - 360) / 2)
            }
        },
        mounted() {
            this.checkEquipStatus();
            this.$store.dispatch('dogetDictionary')
            this.getUnFinish(); //六个进度条
            this.getEquipMaintainStatus(); //设备状态
            this.readQcData(); //折线图

            this.getQcData();
            this.getTotal();
            this.getTaskPct();
            this.getTimelyPct();
            this.getMaterialWarn();
            this.getQcTypeNum();

         },
        watch: {

        },
        methods: {
          getQcTypeNum(){
              this.$http({
                  method: 'post',
                  apiUrl: "/homePage/getQcTypeNum.htm",
              }).then(res => {
                  if (res.code == 0) {
                    this.QcTypeNumList = res.data;
                  }
              })
          },
          // /resource/checkEquipStatus.htm
          async checkEquipStatus(){
            let res = await this.$http({
                method: 'post',
                apiUrl: "/resource/checkEquipStatus.htm",
            });
          },
          getQcData() {
                // let taskjindu = this.$echarts.init(document.getElementById('taskjindu'))
                // this.drawBarChart({side:0.5,font:0.95},taskjindu,'检测及时率');


           },
             // 统计任务累积量
             getTotal(){
                this.$http({
                    method: 'post',
                    apiUrl: "/homePage/getTotal.htm",
                }).then(res => {
                    if (res.code == 0) {
                        this.headList[0].data = res.data.tasks;
                        this.headList[1].data = res.data.samples;
                        this.headList[2].data = res.data.reports;
                        this.headList[3].data = res.data.records;
                        this.headList[4].data = res.data.qcs;
                    }
                })
            },

            getTaskPct(){
                this.$http({
                    method: 'post',
                    apiUrl: "/homePage/getTaskPct.htm",
                }).then(res => {
                    if (res.code == 0) {
                        var obj = {};
                        obj.font = Number(res.data);
                        obj.side = Number(1 - obj.font);
                       let taskjindu1 = this.$echarts.init(document.getElementById('taskjindu1'))
                        this.drawBarChart(obj,taskjindu1,'任务完成率');
                    }
                })
            },
            mGetDate(_year, _month) { //得到一个月的天数
            		if(!_year && !_month) {
            			_year = new Date().getFullYear();
            			_month = new Date().getMonth() + 1
            		}
            		var year = _year;
            		var month = _month;
            		var d = new Date(year, month, 0);
            		return d.getDate();
            	},
            // 上个月所在的年分
            initTime(){
              var date = new Date()
              var days = this.mGetDate(date.getFullYear(),date.getMonth() + 1) //这个月的天数
              date.setTime(date.getTime() - 3600 * 1000 * 24 * days);
              var year = date.getFullYear() + ""
              return year;
            },
            // 实验室样品的检测及时率
            getTimelyPct(){
               var date = new Date()
               var year = date.getFullYear();
               var month = date.getMonth() + 1;
               if(month<10){
                 month = "0"+month
               }
               var nowMonth = year+"-"+month
                this.$http({
                    method: 'post',
                    apiUrl: "/rate/taskCompleteRate.htm",
                     params:{date:year},
                     isJson:false
                }).then(res => {
                    if (res.code == 0) {
                      if(res.data.length > 0){
                        var objMonth = null;
                        res.data.forEach((item) =>{
                          if(item.date == nowMonth){
                            objMonth = item
                          }
                        })
                        if(objMonth){
                          objMonth.rate1 = Number(objMonth.rate.replace("%",""))/100
                          var obj = {}
                          obj.font = objMonth.rate1.toFixed(2)
                          obj.side = Number(1 - obj.font);
                        }else{
                          var obj = {}
                          obj.font = 1
                          obj.side = Number(1 - obj.font);
                        }

                      }else{
                        var obj = {}
                        obj.font = 1
                        obj.side = Number(1 - obj.font);
                      }

                     let taskjindu2 = this.$echarts.init(document.getElementById('taskjindu2'))
                     this.drawBarChart(obj,taskjindu2,'任务完成率');
                    }
                })
            },
            getTimelyPct1(){ //2021-4-24  以前的
                this.$http({
                    method: 'post',
                    apiUrl: "/homePage/getTimelyPct.htm",
                }).then(res => {
                    if (res.code == 0) {

                        // this.drawChart(res.data)
                      console.log(res.data)
                      var date = new Date();
                      var month = (date.getMonth() + 1) < 10 ? "0"+ (date.getMonth() + 1) : date.getMonth() + 1
                      var day =  new Date().getFullYear() + "-" + month;
                      var obj = {};
                      for(var i in res.data){
                        if(i == day){
                          obj.font = Number(res.data[i]);
                        }
                      }
                     obj.side = Number(1 - obj.font);
                     console.log(obj)
                     let taskjindu2 = this.$echarts.init(document.getElementById('taskjindu2'))
                     this.drawBarChart(obj,taskjindu2,'任务完成率');
                    }
                })
            },
            // 物资总量
            getMaterialWarn(){
                this.$http({
                    method: 'post',
                    apiUrl: "/homePage/getMaterialWarn.htm",
                }).then(res => {
                    if (res.code == 0) {
                        this.headList[5].data = res.data;
                    }
                })
            },
            // 折线图
            readQcData(){
                var day = new Date().getFullYear()+"-" + (new Date().getMonth()+1)+ "-" + (new Date().getDate())
                this.$http({
                    method: 'post',
                    apiUrl: "/homePage/readQcData.htm",
                    params:{date:day},
                    isJson:false
                }).then(res => {
                    if (res.code == 0) {

                        this.drawLineChart(res.data);

                    }
                })
            },

            getUnFinish(){
                this.$http({
                    method: 'post',
                    apiUrl: "/homePage/getUnFinish.htm",
                }).then(res => {
                    if (res.code == 0) {
                        this.progressData[0].value = res.data.sampleRegist == undefined ? 0 : res.data.sampleRegist;
                        this.progressData[1].value = res.data.sampleAccept == undefined ? 0 : res.data.sampleAccept;
                        this.progressData[2].value = res.data.sampleReceive == undefined ? 0 : res.data.sampleReceive;
                        this.progressData[3].value = res.data.batchEnter == undefined ? 0 : res.data.batchEnter;
                        this.progressData[4].value = res.data.batchAudit == undefined ? 0 : res.data.batchAudit;
                        this.progressData[5].value = res.data.batchCheck == undefined ? 0 : res.data.batchCheck;

                        this.progressData.sort(function (a, b) {
                            var aValue = a.value;
                            var bValue = b.value;
                            if (aValue > bValue) {
                                return -1;
                            } else if (aValue == bValue) {
                                return 0;
                            } else {
                                return 1;
                            }
                        })
                        // console.log(this.progressData)
                        for(var i in this.progressData){
                            if(this.progressData[0].value == 0){
                                var percent = 0
                            }else{
                                 var percent = (Number(this.progressData[i].value)/Number(this.progressData[0].value)).toFixed(4);
                                percent = percent * 100
                            }

                            this.$set(this.progressData[i],'percent',percent)
                        }
                    }
                })
            },
            changePage(item){
                if(item.page == 'kucun'){
                    this.openpage(item.page)
                }
            },
            openpage(val) {
              console.log(val)
              let value = val;
              if(val == "yiqibaoyang" || val == "yiqijianding" || val == "qijianhecha" ){
                value = "basicinformationofinstrument";
              }
              console.log(this.pageInfo)
                var obj;
                for(var i in this.pageInfo){
                    if(value == this.pageInfo[i].page){
                        obj = this.pageInfo[i]
                    }
                }
                let topmenu;
                let menuName;
                let pageName;

                let premodelData = JSON.parse(sessionStorage.getItem('premodelDataJson'))
                this.menuData = JSON.parse(sessionStorage.getItem('modelDataJson'))
                // console.log(this.menuData)
                for(var i in this.menuData){  //遍历组装好的目录结构 找到topmenu和菜单名称
                    if(this.menuData[i].pageAddress == obj.parentPage){
                        topmenu = i;
                        menuName = this.menuData[i].name
                    }
                }
                let pageObj;
                for(var i in premodelData){ //编辑原始目录 找到
                    if(premodelData[i].pageAddress == obj.page){
                        pageObj = premodelData[i]
                    }
                }
                this.selUserOpernationByModelId(pageObj).then(res => {

                    switch (val){
                      case 'yiqibaoyang':
                        this.$store.state.unnormalValue = "maintainStatus"
                        break;
                      case 'yiqijianding':
                        this.$store.state.unnormalValue = "calibrationStatus"
                        break;
                      case 'qijianhecha':
                        this.$store.state.unnormalValue = "checkStatus"
                        break;
                    }
                    // console.log(obj,topmenu,menuName,)
                    sessionStorage.setItem("userOpernation", JSON.stringify(res.data))
                    this.$store.commit('changenowpage', obj.page);
                    this.$store.commit('changetopmenu', topmenu)
                    this.$store.state.menuName = menuName;
                    this.$store.state.pageName = obj.pageName;

                }).catch(err => {
                    this.$store.commit('changenowpage', obj.page);
                    this.$store.commit('changetopmenu', topmenu)
                    this.$store.state.menuName = menuName;
                    this.$store.state.pageName = obj.pageName;
                })

            },
            //根据菜单id获取操作项
            selUserOpernationByModelId(item) {
                return new Promise((resolve, reject) => {
                    this.$http({
                        apiUrl: '/selUserOpernationByModelId.htm',
                        method: 'post',
                        params: {
                            moduleId: item.id
                        },
                        isJson: false
                    }).then(res => {
                        if (res.code === 0) {
                            resolve(res)
                        } else {
                            reject('接口出错')
                        }

                    })
                })
            },
            // 获取设备状态
            getEquipMaintainStatus() {
                this.$http({
                    method: 'post',
                    apiUrl: "/homePage/getEquipMaintainStatus.htm",
                }).then(res => {
                    if (res.code == 0) {
                        this.equipInfo = res.data;
                        var arr = [];
                        var arr1 = [];
                        var arr2 = [];
                        arr[0] = Number(res.data.maintain); //maintain：保养
                        arr[1] = Number(res.data.calibration); // calibration：校准
                        arr[2] = Number(res.data.check);  // check：核查

                        // let shebeibaoyanglv1 = this.$echarts.init(document.getElementById('shebeibaoyanglv1'));
                        // let shebeibaoyanglv2 = this.$echarts.init(document.getElementById('shebeibaoyanglv2'));
                        // var arrList = [{
                        //     name:["维护保养"],
                        //     color:"#F77A76",
                        //     item:shebeibaoyanglv,
                        //     // value:arr
                        //     value:[50]
                        // },{
                        //     name:["检定校准"],
                        //     color:"#99ADFF",
                        //     item:shebeibaoyanglv1,
                        //     // value:arr1
                        //     value:[80]
                        // },{
                        //     name:["期间核查"],
                        //     color:"#78D9CD",
                        //     item:shebeibaoyanglv2,
                        //     // value:arr2
                        //      value:[100]
                        // },]
                        this.drawEquipChart(arr)
                        // this.drawEquipChart(arrList[1])
                        // this.drawEquipChart(arrList[2])

                    }
                })
            },
            drawEquipChart(arr) {
                let shebeibaoyanglv = this.$echarts.init(document.getElementById('shebeibaoyanglv'));
                // 绘制图表
                shebeibaoyanglv.setOption({
                     grid: {
                        top: "30",
                        left: '0%',
                        right: '0%',
                        bottom: '8%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['维护保养','检定校准','期间核查'],
                        axisLine: {       //y轴
                            show: false
                        },
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        // splitLine: {
                        //     show: true,
                        // },
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {       //y轴
                            show: false
                        },
                        splitLine: { //取消网格线
                            show: false
                        },
                        axisLabel: { //取消刻度的值
                            show: false
                        },
                        max:100,
                        min:0,
                    },
                    series: [{
                        data: arr,
                        type: 'bar',

                        itemStyle: {
                            normal: {
                                color: function (params) {

                                    var colorList = ['#F77A76','#99ADFF','#78D9CD'];
                                    return colorList[params.dataIndex]
                                },
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'outside',
                                color: "#000",
                                formatter: '{c}%',
                            }
                        },
                        barWidth: 40,
                    },]


                });
            },
            // 饼状图
            drawBarChart(obj,baoyanglv,text) {
                // console.log(obj)
                // 基于准备好的dom，初始化echarts实例
                // let baoyanglv = this.$echarts.init(document.getElementById('baoyanglv'))
                // 绘制图表
                baoyanglv.setOption({
                    tooltip : {
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                     grid: {
                        top: "20",
                        left: '8%',
                        right: '8%',
                        bottom: '8%',
                        containLabel: true
                    },
                    series: [
                        {
                            type: 'gauge',
                            radius:'80%',
                            axisLabel:{
                                show:false
                            },
                            axisTick:{
                            show:false
                            },
                            splitLine:{
                                show:false,
                            },
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color:[[obj.font, 'rgba(136,192,249,1)'], [1, 'rgba(136,192,249,0.2)']]
                                }
                            },
                            pointer:{
                                show:false,
                            },
                            detail: {
                                formatter:(value) => {
                                    return (value.toFixed(2) - 0) + "%"
                                },
                                fontSize: 25,
                                offsetCenter: [0, 0],
                            },
                            data: [{value: obj.font * 100}]
                        }
                    ]
                });
            },
            // 雷达图
            drawChart(data) {
                var xData = [];
                var yData = []; //质控完成率
                var arr = []
                for(var i in data){
                    var obj = {};
                    this.$set(obj,'date',i)
                    if(data[i] != null){
                        this.$set(obj,'value',(data[i]*100).toFixed(2) - 0)
                    }else{
                      this.$set(obj,'value',null)
                    }
                    arr.push(obj)
                }
                console.log(arr)
                arr.sort(function (a, b) {
                    var aDate = new Date(a.date).getTime();
                    var bDate = new Date(b.date).getTime()
                    if (aDate < bDate) {
                        return 1;
                    } else if (aDate == bDate) {
                        return 0;
                    } else {
                        return -1;
                    }
                })
                for(var i in arr){
                    var obj = {};
                    obj.name = arr[i].date.substring(5, 7) + "月";
                    console.log(arr[i])
                    obj.max = 100;
                    xData.push(obj);
                    yData.push(arr[i].value);

                }
                let taskjindu = this.$echarts.init(document.getElementById('taskjindu'))
                taskjindu.setOption({
                    grid: {
                        position: 'center',
                    },
                    radar: {
                        shape: 'circle',
                        name: {
                            textStyle: {
                                color: '#88C0F9',
                                backgroundColor: '#fff',
                                borderRadius: 3,
                                padding: [2, 2]
                            },
                        },
                         nameGap:6,
                        splitNumber :10,
                        indicator: xData,
                        axisLine: {
                            lineStyle: {
                                color: '#eee' // 分割线
                            }
                        },
                        splitArea: {
                            areaStyle: {
                                color: ['#fff','#fff','#fff','#fff','#fff','#fff','#fff','#fff','#fff', '#fff'], //圆环颜色
                                shadowColor: '#fff', // 圆颜色
                                shadowBlur: 10
                            }
                        },
                        splitLine : {
                            show : true,
                            lineStyle : {
                                width : 1,
                                color : ['#fff','#fff','#fff','#fff','#fff','#fff','#fff','#fff','#fff', '#78D9CD','#ccc'], // 设置网格的颜色
                            },
                        },

                    },
                    series: [{
                        type: 'radar',
                        symbol: 'rect',
                        symbolSize:6, // 拐点的大小
                        data : [
                            {
                                value : yData,
                                name : '检测及时率'
                            },
                        ],
                        label: {
                            normal: {
                                show: true,
                                position:'inside',
                                distance:5,
                                formatter: (params) => {
                                    return params.value + "%"
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#88C0F9',
                                lineStyle: {
                                    width:3,
                                    color: '#88C0F9',
                                },
                            },
                        },
                    }]
                })
                // 绘制图表
                // taskjindu.setOption({
                //     tooltip: {
                //         trigger: 'axis'
                //     },
                //     color:['#88C0F9'],
                //     tooltip: {
                //         trigger: 'axis',
                //         axisPointer: {
                //             type: "line",

                //         }
                //     },
                //     grid: {
                //         top: "20",
                //         left: '2%',
                //         right: '2%',
                //         bottom: '3%',
                //         containLabel: true
                //     },
                //     xAxis: [{
                //         name: '月份',
                //         type: 'category',
                //         data: xData.map(function(str) {
                //             str = str.substring(5, 7)
                //             return str
                //         }),
                //         axisLabel: {
                //             show: true,
                //             textStyle: {
                //                 fontSize: 12 //更改坐标轴文字大小
                //             }
                //         },
                //         axisLine: {
                //             lineStyle: {
                //                 // color: '#55bafe'
                //             }
                //         },
                //         splitLine:{
                //             show:false,

                //         },
                //         axisPointer: {
                //             label: {
                //                formatter:'{value}月',
                //             }
                //         },
                //     }],
                //     yAxis: {
                //         // name: '',
                //         type: 'value',
                //         splitLine: { //y轴
                //             show: false,
                //         },
                //         axisLabel: {
                //             show: true,
                //             textStyle: {
                //                 fontSize: 12 //更改坐标轴文字大小
                //             }
                //         },
                //          axisPointer: {
                //             label: {
                //                formatter:'{value}月',
                //             }
                //         },

                //     },
                //     series: [{
                //         name:"检测及时率",
                //         data: yData,
                //         type: 'bar',
                //         symbol: 'none',
                //         itemStyle: {
                //             normal: {
                //                 // color: '#289bf4',
                //                 lineStyle: {
                //                     color: '#88C0F9'
                //                 }
                //             }
                //         },
                //         barWidth: 20,

                //     }]
                // })

            },

            // 折线图
            drawLineChart(data){
                // var data = {
                //     "2019-06":{"finishPct":100.0,"avgFinishPct":100.0,"avgStandardPct":97.0},
                //     "2019-05":{"finishPct":100.0,"avgFinishPct":100.0,"avgStandardPct":95.0},
                //     "2019-08":{"finishPct":100.0,"avgFinishPct":100.0,"avgStandardPct":88.0},
                //     "2019-07":{"finishPct":100.0,"avgFinishPct":100.0,"avgStandardPct":100.0},
                //     "2019-02":{"finishPct":100.0,"avgFinishPct":100.0,"avgStandardPct":100.0},
                //     "2019-01":{"finishPct":100.0,"avgFinishPct":100.0,"avgStandardPct":100.0},
                //     "2019-04":{"finishPct":100.0,"avgFinishPct":100.0,"avgStandardPct":100.0},
                //     "2019-03":{"finishPct":100.0,"avgFinishPct":100.0,"avgStandardPct":100.0},
                //     "2019-11":{"finishPct":100.0,"avgFinishPct":100.0,"avgStandardPct":100.0},
                //     "2019-10":{"finishPct":100.0,"avgFinishPct":100.0,"avgStandardPct":100.0},
                //     "2019-09":{"finishPct":100.0,"avgFinishPct":100.0,"avgStandardPct":100.0},
                // }
                var xData = [];
                var yData = []; //质控完成率
                var yData1 = []; //质控达标率
                var arr = []
                for(var i in data){
                    this.$set(data[i],'date',i)
                    arr.push(data[i])
                }
                arr.sort(function (a, b) {
                    var aDate = new Date(a.date).getTime();
                    var bDate = new Date(b.date).getTime()
                    if (aDate < bDate) {
                        return -1;
                    } else if (aDate == bDate) {
                        return 0;
                    } else {
                        return 1;
                    }
                })
                for(var i in arr){
                    xData.push(arr[i].date);
                    yData.push(arr[i].avgFinishPct);
                    yData1.push(arr[i].avgStandardPct)
                }
                let y =  JSON.parse(JSON.stringify(yData.concat(yData1)))
                let AS = y.sort((a, b) => a - b)  //排序
                // var maxValue = AS[arr.length-1]  // 获取最大值：100
                var minValue = AS[0] // 获取最小值
                // console.log(AS,minValue)
                var yMin;
                var yMax = 100;
                var splitNumber = 5
                if(minValue <= 60){
                    yMin = 0
                }else if(minValue <= 80 && minValue > 60){
                     yMin = 60
                }else if(minValue <= 90 && minValue > 80){
                     yMin = 80
                     splitNumber = 6
                }else if(minValue <= 100 && minValue > 90){
                     yMin = 90
                     splitNumber = 10
                }

                let lineChart = this.$echarts.init(document.getElementById('lineChart'))
                // 绘制图表
                lineChart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    color:['#88C0F9','#78D9CD'],
                    legend: {
                        data: ['质控完成率', '质控达标率'],
                        x: 'right',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: "line",

                        }
                    },
                    grid: {
                        top: "20%",
                        left: '0',
                        right: '0',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: xData.map(function(str) {
                            str = str.substring(5, 7)
                            return str
                        }),
                        axisLabel: {
                            show: true,
                            textStyle: {
                                fontSize: 12 //更改坐标轴文字大小
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                // color: '#55bafe'
                            }
                        },
                        splitLine:{
                            show:true,
                            lineStyle:{
                                color: ["#eee"],
                                width: 1,
                                type: "solid"
                            }
                        },
                        axisPointer: {
                            label: {
                               formatter:'{value}月',
                            }
                        },
                    }],
                    yAxis: {
                        type: 'value',
                        min:yMin,
                        max:yMax,
                        splitNumber:splitNumber,
                        splitLine: { //y轴
                            show: true,
                            lineStyle:{
                                color: ["#eee"],
                                width: 1,
                                type: "solid"
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                // color: '#FFF', //更改坐标轴文字颜色
                                fontSize: 12 //更改坐标轴文字大小
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                // color: '#55bafe'
                            }
                        },
                         axisPointer: {
                            label: {
                               formatter:'{value}月',
                            }
                        },

                    },
                    series: [{
                        name:"质控完成率",
                        data: yData,
                        type: 'line',
                        symbol:'star',//拐点样式
                        itemStyle: {
                            normal: {
                                color: '#88C0F9',
                                lineStyle: {
                                    color: '#88C0F9'
                                }
                            }
                        },
                    },{
                        name:"质控达标率",
                        data: yData1,
                        type: 'line',
                        itemStyle: {
                             normal: {
                                color: "#78D9CD",
                                lineStyle: {
                                    color: '#78D9CD'
                                }
                            },
                        },
                    }]
                })
            },

        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .zhanshikuang {
        width: 100%;
    }

    .zhanshikuang .zhanshikuangitem {
        height: 100%;
        display: inline-block;
        box-sizing: border-box;
    }

    .zhanshikuang .zhanshikuangitem>div {
        width: 100%;
        height: 100%;
    }

    #lineChart {
        width: 100%;
        height: 100%;
    }
    .zhanshikuangitem #shebeibaoyanglv,.zhanshikuangitem #shebeibaoyanglv2,.zhanshikuangitem #shebeibaoyanglv1{
         width: 98%;
        height:100%;
        /*float: left;*/

    }

    .zhanshikuangitem>div>div {
        margin: auto;
    }

    .zhanshikuang .zhanshikuangitem:last-child {
        border-right: none;
    }
    /*// 2.草稿  4.已驳回  501.待签发 502.待检测 503.检测中 504.已完成*/
    /*#homePage .taskStatusColor .color1{
        color: red;
    }*/

    #homePage .taskStatusColor .color2 {
        color: #faa646;
    }

    #homePage .taskStatusColor .color3 {
        color: #f55e59;
    }

    #homePage .taskStatusColor .color4 {
        color: #3193f5;
    }
    /*#homePage .taskStatusColor .color5{
        color: red;
    }*/
    /*#homePage .taskStatusColor .color6{
        color: green;
    }*/
    /*.el-table--scrollable-y .el-table__body-wrapper {
        overflow: hidden;
    }*/
    .qcPopover.el-popover{
          border-style: solid !important;
          white-space: nowrap !important;
          z-index: 9999999 !important;
          transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s !important;
          background-color: rgba(50, 50, 50, 0.7) !important;
          border-width: 0px !important;
          border-color: rgb(51, 51, 51) !important;
          border-radius: 4px !important;
          color: rgb(255, 255, 255) !important;
    }
    .qcPopover.el-popper .popper__arrow{
      display: none !important;
    }
    .popoverUl{
      width: 100%;

    }
     .popoverUl li{
       width: 100%;
       line-height: 26px;
     }
     .popoverUl li .qcNum{
       float: right;
     }
</style>
<style scoped>
    #homePage {
        height: calc(100% - 20px) !important;
        background:#EAF4FF !important;
        padding:0 !important;
    }

    #homePage .homeTaskTable {
        height: calc((100% - 140px)/2);
        position:relative;
        clear:both;
        /*background:#fff;*/

    }
    #homePage .el-col-4 {
        height:100%;
    }

    #homePage .el-col-4 .colCon{
            background:#78D9CD ;
            height: 100%;
            width:100%;
            color: #ffffff;
            padding:5px;
    }
    #homePage .el-col-4 .bgColor{
        background:#88C0F9;
    }
    .el-progress{
        display: inline-block;
        width:85%;
    }
    .chartDesc{
        height:25%;
        width:100%;
    }
    .chartDesc .num{
        line-height:35px;
        font-weight:550;
        font-size:16px;
        display: inline-block;
    }
    .cusor{
        cursor: pointer;
    }
    #homePage .el-col-12{
        height: 90px;
        font-size: 16px;
        border: 1px solid #ccc;
        padding: 10px;
    }

    #homePage .homeTaskTable .el-button--text {
        color: #000;
    }
    .chartTitle{
        height: 35px !important;
        text-align:center;
        font-size:16px;
        line-height:35px;
    }
</style>
